<template>
  <div class="rf-storeinfo">
    <div class="rf-storedetails">
      <!-- 放图片的 -->
      <div class="storelocator-storeimgcontainer">
        <img :src="specificImg" alt="" />
      </div>
      <div class="storelocator-storedetailscontainer">
        <h3 class="rf-storelocator-storename">{{specificArea.name}}</h3>
        <div class="rf-storelocator-addressinfo">
          <span class="row">{{specificArea.areaThis}}</span>
          <span class="row">{{specificArea.bigArea}}</span>
          <span class="row">{{specificArea.email}}</span>
          <span class="row">{{specificArea.Phone}}</span>
          <span class="row rf-storelocator-pickuptypeinfo"
            >此地点提供店内取货服务。</span
          >
          <a href="#" class="more rf-storelocator-reservationurl">
            更多信息
            <span class="niumaw">></span>
          </a>
        </div>
        <div class="storelocator-storehoursinfo">
          <div class="storelocator-storehours">
            <div class="rf-storelocator-storehours-item row">
              <span class="rf-storelocator-storehoursdays large-4 small-4"
                >周五-周六:</span
              >
              <span class="rf-storelocator-storehourstiming large-8 small-8"
                >10:00 - 22:30</span
              >
            </div>
            <div class="rf-storelocator-storehours-item row thisway">
              <span class="rf-storelocator-storehoursdays large-4 small-4"
                >周一-周四, 周日:</span
              >
              <span class="rf-storelocator-storehourstiming large-8 small-8"
                >10:00 - 22:00</span
              >
            </div>
          </div>
          <a href="#">查看更多时段
            <span>></span>
          </a>
        </div>
      </div>
      <div class="rf-selectaction"></div>
    </div>
    <!-- 放按钮的div -->
    <div class="rf-storelocator-selectaction">
      <button class="button button-block" @click="Preserve">
        <span>选择</span>
      </button>
    </div>
  </div>
</template>

<script>
import bus from '../../../../../../../../bus';
export default {
  created() {
    const that =this
    bus.$on('InformationThis',function (data) {
      that.specificArea=data
      that.specificImg=data.img
    })
  },
  data() {
    return {
      specificArea:'',
      specificImg:{},
    };
  },
  methods: {
    Preserve(){
      // 点击保存之后关闭窗口
      // 传值給HideSecond
      bus.$emit('PreserClose',true,this.specificArea.name)
    }
  },
};
</script>

<style lang="less" scoped>
.rf-storeinfo {
  .rf-storedetails {
    width: 340px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 458px;
    max-height: 538px;
    position: relative;
    padding: 0 30px;
    .storelocator-storeimgcontainer {
      img {
        width: 280px;
        height: 210px;
      }
    }
    .storelocator-storedetailscontainer {
      box-sizing: border-box;
      padding-top: 5px;
      padding-bottom: 15px;
      .rf-storelocator-storename {
        font-size: 24px;
        font-weight: 600;
        text-align: left;
        color: black;
      }
      .rf-storelocator-addressinfo {
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-top: 12px;
        font-weight: 400;
        .row {
          font-size: 14px;
          color: #787879;
          line-height: 1.5;
          letter-spacing: 0;
        }
        .more {
          margin-top: 12px;
          text-decoration: none;
          color: #277dd4;
          font-size: 12px;
        }
        .niumaw {
          width: 2px;
          height: 10px;
        }
        .more:hover {
          color: black;
        }
        .rf-storelocator-pickuptypeinfo {
          margin-top: 10px;
        }
      }
      .storelocator-storehoursinfo {
        ont-size: 14px;
        line-height: 1.42859;
        font-weight: 400;
        letter-spacing: -0.016em;
        border-top: 1px solid #d2d2d7;
        margin-top: 15px;
        padding-top: 15px;
        text-align: left;
        margin-bottom: 5px;
        a{
          text-decoration: none;
          color: #277dd4;
          font-size: 12px;
        }
        .row {
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
          width: 100%;
          color: #6b6b6c;
        }
        .rf-storelocator-storehours-item {
          text-align: left;
          font-size: 14px;
          .large-4 {
            flex-basis: 33.33333%;
            max-width: 33.33333%;
          }
          .large-8 {
            flex-basis: 66.66667%;
            max-width: 66.66667%;
          }
        }
        .thisway{
          margin-top: 5px;
        }
      }
    }
  }
  .rf-storelocator-selectaction{
    background-color: #fff;
    position: absolute;
    bottom: 0;
    height: 62px;
    z-index: 1;
    width: 100%;
    max-width: 340px;
    box-sizing: border-box;
    border-top: 1px solid #d2d2d7;
    padding: 0 30px;
    .button-block{
      border: none;
      background-color: #fff;
      width: 280px;
      height: 36px;
      margin-top: 13px;
          background: #0071e3;
          border-radius: 8px;
      span{
        color: #fff;
      }
    }
  }
  .button-block:hover{
    cursor: pointer;
    background:#0077ed;
  }
}
</style>